<template>
  <!-- 编辑题库名称 -->
  <el-dialog :visible.sync="localVisible" :title="title" width="500px" @close="handleClose"
    :close-on-click-modal="false" append-to-body>
    <el-form label-width="120px" :model="row" :rules="rules" ref="addObject">
      <el-form-item prop="name" label="题库名称">
        <el-input v-model="row.name" size="mini" style="width: 300px"></el-input>
      </el-form-item>
      <el-form-item label="题库简介">
        <el-input type="textarea" v-model="row.remake" placeholder="请输入题库简介" maxlength="100" show-word-limit></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" size="mini" @click="btnOk">确定</el-button>
        <el-button size="mini" @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { updateSctk } from '@/api/sctk'
export default {
  name: 'updateSctkName',
  props: {
    showDialog: {
      type: Boolean,
      default: false,
      required: true
    },
    title: {
      type: String,
      default: '编辑题库'
    },
    fk_t_sctk_id: {
      type: Number,
      required: true
    },
    row: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      localVisible: this.showDialog,
      rules: {
        name: [
          { required: true, message: '请输入题库名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
        ]
      }
    };
  },
  watch: {
    showDialog(newVal) {
      this.localVisible = newVal;
    },
    localVisible(newVal) {
      if (newVal !== this.showDialog) {
        this.$emit('update:showDialog', newVal);
      }
    }
  },
  methods: {
    btnOk() {
      this.$refs.addObject.validate(async isOk => {
        if (isOk) {
          console.log('111');

          await updateSctk({ ...this.row, id: this.fk_t_sctk_id })
          // 通知父组件更新
          this.$emit('submit')
          //成功提示
          this.$message.success(`重命名成功`)
          //重置表单
          this.handleClose()
        }
      })
    },
    handleClose() {
      this.localVisible = false;
    },
  }
};
</script>

<style scoped></style>